<template>
  <div class="schools">
    <div class="container">
      <!-- 面包屑导航 -->
      <Breadcrumb />
      
      <!-- 页面标题 -->
      <div class="page-header">
        <h1>提招院校</h1>
        <p>浙江省高职院校提前招生参与院校列表</p>
      </div>

      <!-- 搜索筛选 -->
      <div class="search-filters">
        <el-row :gutter="20">
          <el-col :lg="8" :md="12" :sm="24">
            <el-input
              v-model="searchForm.keyword"
              placeholder="搜索院校名称、城市"
              clearable
              @keyup.enter="handleSearch"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-col>
          <el-col :lg="6" :md="12" :sm="24">
            <el-select
              v-model="searchForm.city"
              placeholder="选择城市"
              clearable
            >
              <el-option
                v-for="city in cities"
                :key="city"
                :label="city"
                :value="city"
              />
            </el-select>
          </el-col>
          <el-col :lg="6" :md="12" :sm="24">
            <el-select
              v-model="searchForm.schoolType"
              placeholder="院校类型"
              clearable
            >
              <el-option label="高职院校" value="高职院校" />
              <el-option label="技师学院" value="技师学院" />
            </el-select>
          </el-col>
          <el-col :lg="4" :md="12" :sm="24">
            <el-button type="primary" @click="handleSearch" :loading="loading">
              搜索
            </el-button>
          </el-col>
        </el-row>
      </div>

      <!-- 院校列表 -->
      <div class="schools-grid" v-loading="loading">
        <div
          v-for="school in schools"
          :key="school.id"
          class="school-card"
          @click="goToDetail(school.id)"
        >
          <div class="school-logo">
            <img :src="school.logoUrl || '/default-logo.png'" :alt="school.name" />
          </div>
          
          <div class="school-info">
            <h3>{{ school.name }}</h3>
            <p class="school-type">{{ school.schoolType }}</p>
            
            <div class="school-details">
              <div class="detail-item" v-if="school.city">
                <el-icon><Location /></el-icon>
                <span>{{ school.city }}</span>
              </div>
              
              <div class="detail-item" v-if="school.foundedYear">
                <el-icon><Calendar /></el-icon>
                <span>建校于{{ school.foundedYear }}年</span>
              </div>
              
              <div class="detail-item" v-if="school.phone">
                <el-icon><Phone /></el-icon>
                <span>{{ school.phone }}</span>
              </div>
            </div>
            
            <div class="school-actions">
              <el-button
                type="primary"
                size="small"
                @click.stop="goToDetail(school.id)"
              >
                查看详情
              </el-button>
              
              <el-button
                v-if="school.websiteUrl"
                type="default"
                size="small"
                @click.stop="openWebsite(school.websiteUrl)"
              >
                官网
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 暂无数据 -->
      <div v-if="!loading && !schools.length" class="empty">
        <el-empty description="暂无院校数据" />
      </div>

      <!-- 分页 -->
      <div v-if="total > 0" class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[12, 24, 48]"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useSchoolStore } from '@/stores/school'
import { Search, Location, Calendar, Phone } from '@element-plus/icons-vue'
import Breadcrumb from '@/components/Breadcrumb.vue'

const router = useRouter()
const schoolStore = useSchoolStore()

// 搜索表单
const searchForm = ref({
  keyword: '',
  city: '',
  schoolType: ''
})

// 分页参数
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(0)

// 加载状态
const loading = computed(() => schoolStore.loading)

// 院校列表
const schools = computed(() => schoolStore.schools)

// 城市列表
const cities = ref([
  '杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市',
  '金华市', '衢州市', '舟山市', '台州市', '丽水市'
])

// 搜索处理
const handleSearch = () => {
  currentPage.value = 1
  fetchSchools()
}

// 分页处理
const handlePageChange = (page) => {
  currentPage.value = page
  fetchSchools()
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  fetchSchools()
}

// 获取院校列表
const fetchSchools = async () => {
  const params = {
    page: currentPage.value,
    size: pageSize.value,
    ...searchForm.value
  }
  
  const result = await schoolStore.fetchSchools(params)
  total.value = result.total || 0
}

// 跳转到详情页
const goToDetail = (id) => {
  router.push(`/schools/${id}`)
}

// 打开官网
const openWebsite = (url) => {
  window.open(url, '_blank')
}

// 页面初始化
onMounted(() => {
  fetchSchools()
})
</script>

<style lang="scss" scoped>
.schools {
  min-height: calc(100vh - 200px);
  padding: 40px 0;
  background: #f8f9fa;
  
  .page-header {
    text-align: center;
    margin-bottom: 40px;
    
    h1 {
      font-size: 32px;
      color: #333;
      margin-bottom: 8px;
    }
    
    p {
      color: #666;
      font-size: 16px;
    }
  }
  
  .search-filters {
    background: white;
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  
  .schools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
    
    .school-card {
      background: white;
      border-radius: 12px;
      padding: 24px;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }
      
      .school-logo {
        text-align: center;
        margin-bottom: 20px;
        
        img {
          width: 80px;
          height: 80px;
          object-fit: contain;
          border-radius: 8px;
        }
      }
      
      .school-info {
        text-align: center;
        
        h3 {
          font-size: 18px;
          color: #333;
          margin-bottom: 8px;
        }
        
        .school-type {
          color: #409eff;
          font-size: 14px;
          margin-bottom: 16px;
        }
        
        .school-details {
          margin-bottom: 20px;
          
          .detail-item {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 8px;
            color: #666;
            font-size: 14px;
            
            .el-icon {
              margin-right: 8px;
              color: #999;
            }
          }
        }
        
        .school-actions {
          display: flex;
          justify-content: center;
          gap: 12px;
        }
      }
    }
  }
  
  .pagination {
    display: flex;
    justify-content: center;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .schools {
    padding: 20px 0;
    
    .page-header {
      margin-bottom: 20px;
      
      h1 {
        font-size: 24px;
      }
      
      p {
        font-size: 14px;
      }
    }
    
    .search-filters {
      padding: 16px;
      margin-bottom: 20px;
      
      .el-row {
        .el-col {
          margin-bottom: 16px;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
    
    .schools-grid {
      grid-template-columns: 1fr;
      gap: 16px;
      margin-bottom: 20px;
      
      .school-card {
        padding: 20px;
        
        .school-logo img {
          width: 60px;
          height: 60px;
        }
        
        .school-info h3 {
          font-size: 16px;
        }
        
        .school-actions {
          flex-direction: column;
          
          .el-button {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>